<template>
    <Headline>{{ store.village }}人口数量总览</Headline>
    <div class="stat">
        <div class="total">小区人口</div>
        <div class="total_value">{{ localObj['person_num'] }}</div>
        <div class="label">
            <div>户籍人口</div>
            <div class="item_value">{{ localObj['registered_num'] }}</div>
        </div>
        <div class="label">
            <div>流动人口</div>
            <div class="item_value">{{ localObj['floating_num'] }}</div>
        </div>
        <div class="label">
            <div>本月新增流动人口</div>
            <div class="item_value">{{ localObj['new_floating_num'] }}</div>
        </div>
        <div class="label">
            <div>本月新增户籍人口</div>
            <div class="item_value">{{ localObj['new_registered_num'] }}</div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { useStore } from '@/stores';
const store = useStore();
import { getPersonCount, getPersonOverview } from '@/api/car';
import { getPopulation } from "@/api/base"
const props = defineProps({
    people: {
        type: Object
    }
});
const localObj = ref({
    "person_num": 0,//总人口
    "registered_num": 0,//户籍人口
    "floating_num": 0,//流动人口
    "new_floating_num": 0,//新增流动人口
    "new_registered_num": 3//新增户籍人口
});

watch(() => store.village, (newValue, oldValue) => {
    console.log('map changed from', oldValue, 'to', newValue);
    setDefaultPerson(newValue);
});

onMounted(() => {
    const village = store.village;
    if (village) {
        setDefaultPerson(village);
    }
});
function setDefaultPerson(village) {
    getPopulation().then(resp => {
        let population = {};
        if (village == '杏园小区') {
            population = resp['xy'];
        } else if (village == '湖口小区') {
            population = resp['hk'];
        } else {
            population = resp['ys'];
        }
        localObj.value = population;
        store.setPopulation(population);
    });
}
const getPersonData = async (village) => {
    let res = await getPersonCount(village);
    if (res) {
        for (const item of res) {
            if (item['property'] == '户籍人口') {
                localObj.value['registered_num'] = item['num']
            } else if (item['property'] == '流动人口') {
                localObj.value['floating_num'] = item['num']
            } else if (item['property'] == '境外人口') {

            }
        }
    }

}
const getOverviewData = async (village) => {
    let res = await getPersonOverview(village);
    if (res) {
        for (const item of res) {
            if (item['property'] == '小区人口') {
                localObj.value['person_num'] = item['num']
            } else if (item['property'] == '本月新增流动人口') {
                localObj.value['new_floating_num'] = item['num']
            } else if (item['property'] == '本月新增户籍人口') {
                localObj.value['new_registered_num'] = item['num']
            } else if (item['property'] == '本月新增境外人口') {

            }
        }
    }
}
</script>
<style scoped lang="scss">
.stat {
    padding-top: 18px;
}

.total {
    height: 50px;
    font-size: 30px;
    color: #fff;
    padding-left: 13.7px;
    line-height: 50px;
    background: linear-gradient(270deg, rgba(38, 251, 223, 0.3) 0%, rgba(38, 255, 243, 0.6) 54%, rgba(38, 251, 223, 0.3) 100%);
}

.total_value {
    width: 100%;
    height: 90px;
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    line-height: 90px;
    padding-left: 10px;
}



.label {
    height: 50px;
    font-size: 30px;
    color: #FFF;
    background: linear-gradient(90deg, rgba(38, 130, 255, 0) -6%, rgba(0, 148, 140, 0.3608) 49%, rgba(38, 130, 255, 0.1) 101%);
    box-sizing: border-box;
    border: 1px dashed #21E0C5;
    border-left: 4px solid #21E0C5;
    line-height: 50px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    // opacity: 1;

    .item_value {
        color: #FFF;
        font-size: 30px;
    }
}
</style>